<template>
    <!-- 自定义导航栏 -->
    <view class="header-nav" :class="[position]">
        <view class="header" :style="'padding-top:' +
            statusBarHeight +
            'px;background:' +
            background
            "
        >
            <slot name="content">
                <view class="header_left" v-if="showNavBackBtn">
                    <uni-icons :color="textcolor" size="26" @click="navigateBackPage" type="back" />
                </view>
                <view class="header_title" :style="{ color: `${textcolor}` }">
                    <slot name="title">
                        <view class="text-overflow">{{ text }}</view>
                    </slot>
                </view>
                <view></view>
            </slot>
        </view>
    </view>
</template>

<script>
let statusBarHeight = uni.getSystemInfoSync().statusBarHeight
export default {
    props: {
        // 文字颜色
        textcolor: {
            type: String,
            default: '#fff'
        },
        text: {
            type: String,
            default: ''
        },

        // 是否显示返回
        showNavBackBtn: {
            type: Boolean,
            default: true
        },

        // 背景颜色
        background: {
            type: String,
            default: ''
        },

        // 点击返回跳转的路径
        backURL: {
            type: String,
            default: ''
        },

        position: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            statusBarHeight: statusBarHeight,
        };
    },
    mounted() {
        //#ifdef MP-WEIXIN
        let serchTop = 0
        let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
        let menuButtonCenterPos = menuButtonInfo.top + menuButtonInfo.height / 2
        serchTop = menuButtonCenterPos - uni.upx2px(32)
        this.statusBarHeight = serchTop
        console.log(statusBarHeight + 2, serchTop)
        //#endif
    },
    methods: {
        navigateBackPage() {
            if (this.backURL.length > 0) {
                uni.switchTab({
                    url: this.backURL
                })
                return
            }
            uni.navigateBack();
        },
    },
};
</script>

<style scoped lang="scss">
view {
    box-sizing: border-box;
}

.header-nav{
    &.absolute{
        width: 100vw;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 999;
    }

    &.fiexed{
        width: 100vw;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
    }
}

.header {
    height: 64rpx;
    box-sizing: content-box;
    // background: linear-gradient(-38deg, #FD4819, #FC312B);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fefefe;
    font-size: 33rpx;
    padding: 0 48rpx;
    overflow: hidden;

    .header_left {
        image {
            width: 18rpx;
            height: 24rpx;
            position: relative;
            left: 15rpx;
        }
    }

    .header_title {
        width: 300rpx;
        text-align: center;
        position: absolute;
        right: 0;
        left: 0;
        margin: 0 auto;
        font-weight: 600;
        font-size: 44rpx;
    }

    .header_right {
        width: 100rpx;
        font-size: 29rpx;
        text-align: right;
    }

    .header_fx {
        width: 35rpx;
        height: 35rpx;
    }
}
</style>